<script setup lang="ts">
import { computed, h } from 'vue';
import { useRoute } from 'vue-router';
import { ElIcon } from 'element-plus';
import useAppStore from '@/store/app';
import { storeToRefs } from 'pinia';

const appStore = useAppStore()
const {layout} = storeToRefs(appStore)
const route = useRoute()
const breadcrumbList = computed(() => route.matched.filter(item=>item.meta.title))
const separatorIcon = h(ElIcon, { class: 'i-ep:d-arrow-right' }, () => { })
</script>
<template>
    <ElBreadcrumb :separator-icon="separatorIcon" v-if="layout.showBreadCrumb">
        <ElBreadcrumbItem v-for="item in breadcrumbList" :to="item.path">{{ item.meta.title }}</ElBreadcrumbItem>
    </ElBreadcrumb>
</template>